{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 侧边栏 - 历史记录 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Conversations</h5>
                    <a href="{% url 'chat_app:new_conversation' %}" class="btn btn-sm btn-primary">New Chat</a>
                </div>
                <div class="list-group">
                    {% for conv in request.user.conversation_set.all %}
                    <a href="{% url 'chat_app:chat_detail' conv.id %}"
                       class="list-group-item list-group-item-action {% if conv.id == conversation.id %}active{% endif %}">
                        {{ conv.title|truncatechars:20 }}
                        <small class="text-muted d-block">{{ conv.updated_at|date:"M d, H:i" }}</small>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 主聊天区域 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <h5>{{ conversation.title }}</h5>
                    <a href="{% url 'chat_app:new_conversation' %}" class="btn btn-sm btn-outline-secondary">New Chat</a>
                </div>
                
                <div class="card-body chat-messages" style="height: 60vh; overflow-y: auto;">
                    {% for message in messages %}
                    <div class="mb-3">
                        <strong>{{ message.role|title }}:</strong>
                        <div class="message-content p-2 rounded {% if message.role == 'user' %}bg-light{% else %}bg-light border{% endif %}">
                            {{ message.content|linebreaks }}
                        </div>
                        <small class="text-muted">{{ message.timestamp|time }}</small>
                    </div>
                    {% endfor %}
                </div>
                
                <div class="card-footer">
                    <form method="POST">
                        {% csrf_token %}
                        <div class="input-group">
                            <input type="text" name="message" class="form-control" 
                                   placeholder="Type your message..." required>
                            <button type="submit" class="btn btn-primary">Send</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 自动滚动到底部
    window.onload = function() {
        const chatContainer = document.querySelector('.chat-messages');
        chatContainer.scrollTop = chatContainer.scrollHeight;
    };
</script>
{% endblock %}